<template>
  <div class="step">
    <div class="ellipsis" :class="{'active': step>=1}">1.提交申请</div>
    <div class="ellipsis" :class="{'active': step>=2}"> - 2.登记手机信息</div>
    <div class="ellipsis" :class="{'active': step>=3}"> - 3.购买指定商品</div>
    <div class="ellipsis" :class="{'active': step>=4}"> - 4.申请成功</div>
  </div>
</template>
<script>
  export default {
    props: {
      step: { type: Number, default: 1 }
    }
  }
</script>
<style lang="scss" scoped>
  .step{
    display: flex;
    font-size: 12px;
    color: #aaa;
    padding: 4vw 5vw 4vw;
    border-top: 1px solid rgba(204,204,204,0.5);
    justify-content: center;
    .active{
      color: #333;
    }
    div + div{
      margin-left: 5px;
    }
    
  }
</style>
